<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Margin-Bottom - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">margin-bottom</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Margin Properties</b><br></td>
</tr>
<tr>
    <td><a href="margin.htm">margin</a><br>
        <a href="margintop.htm">margin-top</a><br></td>
    <td><a href="marginright.htm">margin-right</a><br>
        <a href="marginleft.htm">margin-left</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">0</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>ALL</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#margin-bottom">CSS1: Sect. 5.5.3</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/box.html#margin-properties">CSS2: Sect. 8.3</a>,
        <a href="http://www.w3.org/TR/CSS21/box.html#margin-properties">CSS2.1: Sect. 8.3</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property controls the size of the bottom margin of an element's
        rendering box. Negative values are allowed. Margins are transparent
        and the background value of the parent element shines through.
        <br><br>

        Collapsing margins: adjoining vertical margins between regular-flow
        elements may collapse; The larger of adjacent margin values is used.
        If the adjacent margins are all negative, the larger of the negative
        values is used. If positive and negative vertical margins are adjacent,
        the value should be collapsed thus: the largest of the negative margin
        values should be subtracted from the largest positive margin value.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value specifies that a value determined by the browser be used for
        this property.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B1</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to either an absolute measurement or a relative measurement based on the
        current element's font size.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B1</i></b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the width of the current element's containing block.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">blockquote</b>
        { <span class="property">margin-bottom:</span> 3.0in }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">blockquote</b> <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">margin-bottom:</span>
        3.0in&quot;&gt;This is a test document&lt;/<b class="tagname">blockquote</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
        <dd><b class="alert2">4.0-5.0:</b>
        <dd>- This property does not apply to inline elements or table cells (TD/TH.)
        <dd><b class="alert2">5.5+:</b>
        <dd>- Beginning in 5.5 Beta 1, this property now applies to inline elements.
        </dl>
     <li><b class="alert">Netscape</b>
        <dl>
        <dd><b class="alert2">4.x:</b>
        <dd>- For inline elements, form field elements and replaced elements, a
            linebreak is applied after the element, and then the bottom-margin
            value is applied.
        <dd>- Negative values are ignored for this property.
        <dd>- All values for this property are ignored for LI elements.
        <dd>- Values for this property are not applied relative to the parent
            element edge as they should be for elements that do not use
            default margins of zero (eg: most block-level elements.)
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
        <dd><b class="alert2">3.5:</b>
        <dd>- This property does not apply to inline elements, form fields and
            replaced elements (eg: images.)
        <dd>- Negative margins applied to images appear to sometimes obscure
            content beneath even when the image is transparent. At least one
            case of negative margins I tried also skews image dimensions from
            their intrinsic values.
        <dd>- Applying this property to table cells is very problematic, especially
            negative margins. Some margin values cause extra cell-spacing while
            others cause cell and content overlap.
        <dd>- Observing the behavior of the W3C test suite, there appears to be
            some problems in the rendering of punctuation characters at
            line-wrap points.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>